<!-- 车辆归还 -->
<template>
  <view class="container">
    <ve-form :model="form" ref="formRef" :rules="rules" layout="vertical">
      <ve-card>
        <ve-form-item label="归还时间" required prop="endTime">
          <ve-date-picker v-model="form.endTime" title="归还时间" @confirm="onDateConfirm" />
        </ve-form-item>
        <ve-form-item label="备注" :borderBottom="false" labelPosition="top">
          <ve-input v-model="form.remark" :maxlength="200" placeholder="请输入" type="textarea" />
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box>
      <ve-button :loading="okLoading" type="primary" size="long" @click="submitFn">提交</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import useToast from '@/hooks/useToast'
  import { returnCarFinish } from '@/api/asset/car-manager'
  import dayjs from 'dayjs'

  // 费用相关 开始
  const formRef = ref()
  const form = ref<any>({
    type: 1,
  })
  const onDateConfirm = (date: string) => {
    form.value.endTime = date
  }

  const rules = {
    endTime: { required: true, message: '请选择归还时间' },
  }

  const okLoading = ref(false)
  const submitFn = () => {
    formRef.value.validate((valid, errors) => {
      if (valid) {
        okLoading.value = true
        returnCarFinish({ ...form.value })
          .then(() => {
            useToast({
              title: '归还成功',
            }).then(() => {
              uni.$emit('getList', true)
              uni.navigateBack()
            })
          })
          .finally(() => (okLoading.value = false))
      }
    })
  }

  onLoad((options) => {
    form.value.carId = +options.carId
    form.value.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  })
</script>
<style lang="less" scoped>
  .container {
    height: auto;
    min-height: 100%;
    padding: 24rpx 24rpx 48rpx;
  }
</style>
